<template>
  <a-card class="business" title="菜单管理" size="small">
    <!--=================================查询工具条UI===================================================================-->
    <a-card title="工具栏" :bordered="false" size="small">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form ref="menuQueryForm" :model="menuQueryData" :inline="true" size="small">
            <el-col :span="21">
              <el-form-item prop="name" label="菜单名称">
                <el-input style="width: 8vw" v-model="menuQueryData.name" placeholder="待查询的菜单名称..." clearable/>
              </el-form-item>
              <el-form-item prop="type" label="菜单类型">
                <el-select v-model="menuQueryData.type" style="width: 8vw" clearable>
                  <el-option value="0" label="菜单"/>
                  <el-option value="1" label="按钮"/>
                  <el-option value="2" label="其它"/>
                </el-select>
              </el-form-item>
              <el-form-item prop="enabled" label="菜单状态">
                <el-select v-model="menuQueryData.enabled" style="width: 8vw" clearable>
                  <el-option value="0" label="禁用"/>
                  <el-option value="1" label="正常"/>
                </el-select>
              </el-form-item>
              <el-form-item prop="permission" label="授权标识">
                <el-input v-model="menuQueryData.permission" placeholder="对应的授权标识..." style="width: 8vw" clearable/>
              </el-form-item>
              <!--              <el-form-item prop="dateRange" label="创建时间">
                              <el-date-picker v-model="dateRange" type="daterange" align="right" unlink-panels
                                              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                              :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                              </el-date-picker>
                            </el-form-item>-->
            </el-col>
            <el-col :span="3" align="end">
              <el-form-item>
                <el-button-group>
                  <el-link type="primary" size="small" @click="queryButtonEvent"><i
                      class="fa-solid fa-magnifying-glass"></i> 查询
                  </el-link>
                  <el-divider direction="vertical"/>
                  <el-link type="info" size="small"  @click="resetButtonEvent"><i class="fa-solid fa-arrow-rotate-left"></i> 重置
                  </el-link>
                </el-button-group>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </a-card>
    <el-row type="flex" justify="center" style="margin-top: -2.5vh">
      <el-divider/>
    </el-row>
    <!--==================================当前菜单数据展示UI=============================================================-->
    <a-card title="当前菜单数据" :bordered="false" size="small">
      <el-table :data="menusData" stripe :row-key="r=>r.id"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                size="small" :header-cell-style="{'background-color': '#7dbcea', 'color': '#fff'}"
                :expand-row-keys="expandRowKeys"  height="53vh">
        <el-table-column prop="name" label="菜单名称" align="center" min-width="10%"/>
        <el-table-column prop="type" label="菜单类型" align="center" min-width="8%">
          <template slot-scope="item">
            <el-tag v-if="item.row.type === 0" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="item.row.type === 1" size="small" type="warning">按钮</el-tag>
            <el-tag v-else size="small" type="info">其它</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="features" label="菜单功能" align="center" min-width="15%"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="path" label="路由跳转路径" align="center" min-width="12%">
          <template v-slot="item">
            {{ item.row.path ? item.row.path : "无" }}
          </template>
        </el-table-column>
        <el-table-column label="访问页面" align="center" min-width="10%">
          <template v-slot="item">
            {{ item.row.comAlias ? item.row.comAlias : "无" }}
          </template>
        </el-table-column>
        <el-table-column prop="permission" label="权限标识" align="center" min-width="12%">
          <template v-slot="item">
            {{ item.row.permission ? item.row.permission : "无" }}
          </template>
        </el-table-column>
        <el-table-column prop="iconClass" label="代表图标" align="center" min-width="8%">
          <template v-slot="item">
            <i :class="item.row.iconClass"/>
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="当前状态" align="center" min-width="10%">
          <template v-slot="item">
            <el-tag v-if="item.row.enabled" type="success" size="small">正常</el-tag>
            <el-tag v-else type="danger" size="small">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间" align="center" min-width="10%">
          <template v-slot="item">
            {{ item.row.createdDate ? (new Date(item.row.createdDate)).toLocaleDateString() : '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="modifiedDate" label="更新时间" align="center" min-width="10%">
          <template v-slot="item">
            {{ item.row.modifiedDate ? (new Date(item.row.modifiedDate)).toLocaleDateString() : '无' }}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="20%">
          <template slot="header">
            <el-button type="danger" size="mini"  @click="addNewMenu"><i
                class="fa-solid fa-plus"></i> 新增
            </el-button>
          </template>
          <template v-slot="item">
            <el-link type="warning"  @click="updateButtonClickEvent(item.row)"><i
                class="fa-solid fa-pen-to-square"></i> 更新
            </el-link>
            <el-divider direction="vertical"/>
            <el-link type="danger"  @click="deleteButtonClickEvent(item.row.id)"
                     v-if="item.row.parentId !==2"><i class="fa-solid fa-trash-can"></i> 删除
            </el-link>
            <el-divider direction="vertical" v-if="item.row.parentId !==2 "/>
            <el-link v-show="item.row.enabled" v-if="item.row.parentId !==2" type="danger"
                     @click="forbiddenButtonClickEvent(item.row)"><i
                class="fa-solid fa-lock"></i> 禁用
            </el-link>
            <el-link v-show="!item.row.enabled" type="success"
                     v-if="item.row.parentId !==2" @click="enableButtonClickEvent(item.row)"><i
                class="fa-solid fa-lock-open"></i> 启用
            </el-link>
            <el-divider direction="vertical" v-if="item.row.parentId !==2"/>
            <el-link type="primary"  @click="detailButtonClickEvent(item.row)"><i
                class="fa-solid fa-ellipsis-vertical"></i> 详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </a-card>
    <!--=================================查看详情对话框===============================================================-->
    <a-modal :title="dialogName" :visible="showDialog" :maskClosable="false" width="70vw"
             @cancel="showDialog = !showDialog">
      <template slot="footer">
        <el-button type="primary" @click="showDialog = !showDialog" size="small">确定</el-button>
      </template>
      <!--第一描述列表：展示菜单的基本信息-->
      <template v-model="specificMenuData">
        <el-descriptions title="基本信息" :column="4" border :labelStyle="{'text-align' : 'center'}"
                         :content-style="{'text-align' : 'center'}">
          <el-descriptions-item label="菜单名称"> {{ specificMenuData.name }}</el-descriptions-item>
          <el-descriptions-item label="上级菜单">
            {{ specificMenuData.parentName ? specificMenuData.parentName : '无' }}
          </el-descriptions-item>
          <el-descriptions-item label="菜单类型">
            <el-tag v-if="specificMenuData.type === 0" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="specificMenuData.type === 1" size="small" type="warning">按钮</el-tag>
            <el-tag v-else size="small" type="info">其它</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="菜单别名">{{ specificMenuData.alias }}</el-descriptions-item>

          <el-descriptions-item label="菜单功能" :span="4">{{ specificMenuData.features }}</el-descriptions-item>

          <el-descriptions-item label="适应系统">
            {{ specificMenuData.roleId === 0 ? '信息管理系统' : (specificMenuData.roleId === 1 ? "客户访问系统" : "合作者系统") }}
          </el-descriptions-item>
          <el-descriptions-item label="菜单图标">
            <i :class="specificMenuData.iconClass"/>
          </el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag v-if="specificMenuData.enabled" type="success" size="small">正常</el-tag>
            <el-tag v-else type="danger" size="small">禁用</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="所属排序号">{{ specificMenuData.sort }}</el-descriptions-item>

          <el-descriptions-item label="录入用户">{{ specificMenuData.createdUser }}</el-descriptions-item>
          <el-descriptions-item label="录入时间">
            {{ specificMenuData.createdDate ? (new Date(specificMenuData.createdDate)).toLocaleDateString() : '无' }}
          </el-descriptions-item>
          <el-descriptions-item label="修改用户">
            {{ specificMenuData.modifiedUser ? specificMenuData.modifiedUser : '无' }}
          </el-descriptions-item>
          <el-descriptions-item label="修改时间">
            {{ specificMenuData.modifiedDate ? (new Date(specificMenuData.modifiedDate)).toLocaleDateString() : '无' }}
          </el-descriptions-item>
        </el-descriptions>
        <!--第二描述列表：用于展示前端路由相关信息-->
        <el-descriptions title="路由相关" :column="3" border :labelStyle="{'text-align' : 'center'}"
                         :content-style="{'text-align' : 'center'}" style="margin-top: 25px">
          <template slot="extra">
            <h4>跳转路径：{{ specificMenuData.path ? specificMenuData.path : "无" }}</h4>
          </template>
          <el-descriptions-item label="页面名称">
            {{ specificMenuData.componentAlias ? specificMenuData.componentAlias : "无" }}
          </el-descriptions-item>
          <el-descriptions-item label="组件名称">
            {{ specificMenuData.componentName ? specificMenuData.componentName : "无" }}
          </el-descriptions-item>
          <el-descriptions-item label="所有目录">
            {{ specificMenuData.componentDir ? specificMenuData.componentDir : "无" }}
          </el-descriptions-item>
        </el-descriptions>

        <!--第三描述列表：用于展示授权岗位信息-->
        <el-row type="flex" justify="space-between" style="margin-top: 25px">
          <el-col :span="6">
            <h3 style="font-weight: bolder">授权信息</h3>
          </el-col>
          <el-col :span="6" align="end">
            <h4>授权标识： {{ specificMenuData.permission }}</h4>
          </el-col>
        </el-row>
        <el-table :data="specificMenuData.position" border
                  :header-cell-style="{'background-color': '#7dbcea', 'color': '#fff'}">
          <el-table-column label="所属部门" prop="deptName" align="center" min-width="20%"></el-table-column>
          <el-table-column label="岗位名称" prop="name" align="center" min-width="20%"></el-table-column>
          <el-table-column label="岗位职责" prop="responsibility" align="center" min-width="60%"></el-table-column>
        </el-table>
      </template>
    </a-modal>
    <a-modal title="菜单查询" :visible="showQueryDialog" :maskClosable="false" width="90vw"
             @cancel="showQueryDialog = !showQueryDialog">
      <template slot="footer">
        <el-button type="primary" @click="showQueryDialog = !showQueryDialog" size="small">确定</el-button>
      </template>
      <el-table :data="queryRes" stripe :row-key="r=>r.id"
                size="small" :header-cell-style="{'background-color': '#7dbcea', 'color': '#fff'}"
                :expand-row-keys="expandRowKeys" height="550px" >
        <el-table-column prop="name" label="菜单名称" align="center" min-width="10%"/>
        <el-table-column prop="parentName" label="上级菜单" align="center" min-width="10%"/>
        <el-table-column prop="type" label="菜单类型" align="center" min-width="8%">
          <template slot-scope="item">
            <el-tag v-if="item.row.type === 0" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="item.row.type === 1" size="small" type="warning">按钮</el-tag>
            <el-tag v-else size="small" type="info">其它</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="features" label="菜单功能" align="center" min-width="15%"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="path" label="路由跳转路径" align="center" min-width="12%">
          <template v-slot="item">
            {{ item.row.path ? item.row.path : "无" }}
          </template>
        </el-table-column>
        <el-table-column label="访问页面" align="center" min-width="10%">
          <template v-slot="item">
            {{ item.row.componentAlias ? item.row.componentAlias : "无" }}
          </template>
        </el-table-column>
        <el-table-column prop="permission" label="权限标识" align="center" min-width="10%" show-overflow-tooltip>
          <template v-slot="item">
            {{ item.row.permission ? item.row.permission : "无" }}
          </template>
        </el-table-column>
        <el-table-column prop="iconClass" label="代表图标" align="center" min-width="8%">
          <template v-slot="item">
            <i :class="item.row.iconClass"/>
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="当前状态" align="center" min-width="10%">
          <template v-slot="item">
            <el-tag v-if="item.row.enabled" type="success" size="small">正常</el-tag>
            <el-tag v-else type="danger" size="small">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间" align="center" min-width="10%">
          <template v-slot="item">
            {{ item.row.createdDate ? (new Date(item.row.createdDate)).toLocaleDateString() : '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="modifiedDate" label="更新时间" align="center" min-width="10%">
          <template v-slot="item">
            {{ item.row.modifiedDate ? (new Date(item.row.modifiedDate)).toLocaleDateString() : '无' }}
          </template>
        </el-table-column>
        <el-table-column label="可执行操作" align="center" min-width="20%">
          <template v-slot="item">
            <el-link type="warning"  @click="updateButtonClickEvent(item.row)"><i
                class="fa-solid fa-pen-to-square"></i> 更新
            </el-link>
            <el-divider direction="vertical"/>
            <el-link type="danger"  @click="deleteButtonClickEvent(item.row.id)"
                     v-if="item.row.parentId !==2"><i class="fa-solid fa-trash-can"></i> 删除
            </el-link>
            <el-divider direction="vertical" v-if="item.row.parentId !==2 "/>
            <el-link v-show="item.row.enabled" v-if="item.row.parentId !==2" type="danger"
                     @click="forbiddenButtonClickEvent(item.row)"><i
                class="fa-solid fa-lock"></i> 禁用
            </el-link>
            <el-link v-show="!item.row.enabled" type="success"
                     v-if="item.row.parentId !==2" @click="enableButtonClickEvent(item.row)"><i
                class="fa-solid fa-lock-open"></i> 启用
            </el-link>
            <el-divider direction="vertical" v-if="item.row.parentId !==2"/>
            <el-link type="primary" :disabled="chldMnStatus.detail" @click="detailButtonClickEvent(item.row)"><i
                class="fa-solid fa-ellipsis-vertical"></i> 详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 25px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageCurrent"
                       :page-sizes="[1, 5, 10, 20, 50, 100, 300]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="infoTotal">
        </el-pagination>
      </el-row>
    </a-modal>
  </a-card>
</template>

<script>
import { Tabs, TabPane, Table, TableColumn, Pagination} from 'element-ui'
import {TreeSelect} from "ant-design-vue"
import Qs from "qs";
function dataConverFatherAndChildrenNode(parentMenus)
{
  if(!Array.isArray(parentMenus))
    return null;
  /*parentMenus = parentMenus.filter(item => !item.type);*/
  let menuMap = new Map;
  parentMenus.forEach((item) =>
  {
    menuMap.set(item.id, item);
  })
  let target = [];
  parentMenus.forEach((item) =>
  {
    let parent = menuMap.get(item.parentId);
    if (!parent)
    {
      target.push(item);
    } else
    {
      if (!Array.isArray(parent.children))
      {
        parent.children = [];
      }
      parent.children.push(item);
    }
  });
  return target;
}

export default {
  name: "MenuMngr.vue",
  components: {
    "el-tabs": Tabs,
    "el-tab-pane": TabPane,
    "el-table": Table,
    "el-table-column": TableColumn,
    "a-tree-select": TreeSelect,
    "el-pagination": Pagination
  },
  data()
  {
    return {
      menuQueryData: {
        name: "",
        type: "",
        enabled: "",
        permission: "",
        createdStartDate:'',
        createdEndDate: '',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker)
          {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker)
          {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker)
          {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateRange: [],
      menusData: [],
      dialogName: "菜单详情",
      showDialog: false,
      chldMnStatus: {
        add: true,
        update: true,
        delete: true,
        forbidden: true,
        enable: true,
        detail: true,
        query: true
      },
      expandRowKeys: [],
      specificMenuData: {},
      showQueryDialog: false,
      queryRes: [],
      infoTotal: 0,
      pageSize: 5,
      pageCurrent: 1
    }
  },
  methods: {
    /*展示当所有菜单数据*/
    async getAllMenusData()
    {
      /*方法中通过Get请求方式，以/menu为URL请求对应的服务器方法，获取数据库中保存的所有菜单信息，得到成功响应后，将数据渲染到页面上！*/
      /*发起请求 this.$http 等同于axios*/
      const {data: {resCode, resMsg, resData}} = await this.$http.get("/menu");
      console.log(resCode, resMsg, resData);
      this.menusData = resData;
      this.menusData = dataConverFatherAndChildrenNode(this.menusData);
    },
    /*新增按钮处理方法*/
    addNewMenu()
    {
      /*页面跳转*/
      this.$router.push("/menu/add")
    },
    /*更新按钮点击事件*/
    updateButtonClickEvent(data)
    {

    },
    /*删除按钮点击事件*/
    deleteButtonClickEvent(id)
    {

    },
    /*禁用按钮点击事件处理函数*/
    forbiddenButtonClickEvent(it)
    {

    },
    /*启用按钮点击事件处理函数*/
    enableButtonClickEvent(menuData)
    {

    },
    /*详情按钮点击事件处理函数*/
    async detailButtonClickEvent(menu)
    {

    },
    /*查询按钮点击事件处理函数*/
    async queryButtonEvent()
    {

    },
    /*分页组件当前页改变事件的处理函数*/
    async handleCurrentChange(value)
    {


    },
    /*分布组件页面大小改变事件处理函数*/
    async handleSizeChange(value)
    {

    },
    /*查询重置按钮点击事件处理函数*/
    resetButtonEvent()
    {
      /*for(let key in this.menuQueryData)
        this.menuQueryData[key] = "";
      this.dateRange = "";*/

    }
  },
  /*当要自动执行某一方法时，该方法必须在created()|mounted()之一调用*/
  created()
  {
    this.getAllMenusData();
  },
}
</script>

<style>
.business{
  height: 100%;
  padding: 0 15px;
}
</style>